<template>
  <div class="nav-wrap">
    <div class="nav-content">
      <div class="left">
        <img src="https://proc58103-pic18.websiteonline.cn/upload/vm8h.jpg" class="logo">
        <div class="company">
          <strong class="zh-name"> 玉发集团 </strong>
          <div class="cn-name"> zhengzhou yufa group </div>
        </div>
        <div class="line">
          <div class="vertical-solid"></div>
        </div>
        <div class="company-desc">
          <div class="main"> 30年高端磨料生产企业 </div>
          <div class="sub"> 只为您提供更贴心优质的服务 </div>
        </div>
      </div>
      <div class="right">
        <img class="phone-icon" src="https://proc58103-pic18.websiteonline.cn/upload/phone.jpg" />
        <div class="phone-wrap">
          <div class="phone-title">
            服务热线
          </div>
          <div class="phone1">
            <span>
              0371-68133666
            </span>
            <span class="c">
              0371-68133339
            </span>
            <span>
              0371-68133290
            </span>
          </div>
          <div class="phone2">
            <span>
              0371-68133899
            </span>
            <span class="c">
              0371-85706777
            </span>
            <span>
              0371-85707222(传真)
            </span>
          </div>
        </div>
      </div>
      <div class="language">
        <div v-if="1">
          <span class="icon">EN</span>
          <span class="name">English</span>
        </div>
        <div v-else>
          <span class="icon">ZN</span>
          <span class="name">简体中文</span>
        </div>
      </div>
    </div>
    <nav>
      <router-link to="/">网站首页</router-link>
      <router-link to="/about">关于玉发</router-link>
      <router-link to="/task">产品展示</router-link>
      <router-link to="/merchant">新闻资讯</router-link>
      <router-link to="/openPlatform">企业文化</router-link>
      <router-link to="/concat">联系我们</router-link>
    </nav>
  </div>
</template>

<script>
import store from '@/store'
import { mapGetters } from 'vuex'
export default {
  name: 'Nav',
  data () {
    return {
      // 初始化滚动距离为0
      scrollDistance: 0,
      popoverLoading: false
    }
  },
  computed: {
    routerName () {
      return this.$route.name
    },
    ...mapGetters('user', [
      'phone'
    ])
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    corpPopoverOnShow () {
      // this.$nextTick(() => {
      //   this.$refs.corpScrollbarEl.handleScroll()
      // })
    },
    handleScroll() {
      this.scrollDistance = window.scrollY
    },
    loginOut () {
      this.$message.success('退出成功')
      store.commit('user/setUserInfo', {})
      this.$router.push({name: 'home'})
    }
  }
}
</script>

<style scoped lang="scss">
.nav-wrap {
  position: fixed;
  left: 0;
  top: 0;
  height: 177px;
  background-color: transparent;
  background-image: url(https://proc58103-pic18.websiteonline.cn/upload/rlpm.jpg);
  background-repeat: repeat-x;
  background-position: center bottom;
  background-attachment: scroll;
  width: 100%;
  z-index: 10;
  .nav-content {
    width: 1200px;
    height: 121px;
    display: flex;
    align-items: center;
    margin: 0 auto;
    justify-content: space-between;
    position: relative;
    .left {
      display: flex;
      align-items: center;

      .logo {
        width: 86px;
        height: 84.23px;
      }

      .company {
        display: flex;
        flex-direction: column;
        margin-left: 16px;

        .zh-name {
          font-size: 30px;
          color: rgb(0, 0, 0);
          letter-spacing: 12px;
          font-weight: 800;
        }

        .cn-name {
          margin-top: 8px;
          text-decoration: none;
          color: #5a5a5a;
        }
      }

      .line {
        padding: 0px;
        border-color: transparent;
        border-width: 0px;
        overflow: hidden;
        width: 30px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translateX(-4px);
        .vertical-solid {
          border: none;
          border-left: 1px solid #d9d9d9;
          width: 0;
          height: 40px;
        }
      }

      .company-desc {
        .main {
          color: #434343;
          font-weight: bold;
          font-size: 20px;
        }

        .sub {
          font-size: 15px;
          color: rgb(102, 102, 102);
          margin-top: 12px;
        }
      }
    }

    .right {
      display: flex;
      align-items: center;
      .phone-icon {
        margin-right: 10px;
      }
      .phone-wrap {
        font-weight: 500;
        margin-left: 10px;
        .phone-title {
          color: rgb(18, 18, 18);
          font-size: 16px;
          line-height: 160%;
        }
        .phone1, .phone2 {
          font-size: 16px;
          color: rgb(74, 42, 29);
          line-height: 160%;
          .c {
            margin: 0 10px;
          }
        }
      }
    }
    .language {
      position: absolute;
      right: 0;
      top: 10px;
      display: flex;
      align-items: center;
      .icon {
        width: 20px;
        height: 20px;
        background-color: #1890ff;
        color: #fff;
        font-size: 14px;
        padding: 2px 4px;
        border-radius: 4px;
      }
      .name {
        font-size: 16px;
        color: rgb(90, 90, 90);
        margin-left: 6px;
        font-weight: 500;
      }
    }
  }
  nav {
    width: 100%;
    height: 55px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1200px;
    margin: 0 auto;
    a {
      height: 100%;
      width: 200px;
      color: #fff;
      text-decoration: none;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: translateY(1px);
    }
    a:hover {
      background-color: red;
    }
  }
}
</style>
